<template>
	<div class="achievement_container">
		<div class="head">{{ title }}</div>
		<slot></slot>
	</div>
</template>

<script>
export default {
	props: {
		title: { type: String, default: '' }
	}
};
</script>

<style lang="scss" scoped>
:deep(.achievement_container) {
	padding: 16px;
	border: solid 1px #788fff;
	background-color: #f3f5ff;
	.head {
		line-height: 1;
		font-size: 18px;
		font-weight: bold;
		color: #606266;
	}
	.body {
		position: relative;
		padding: 16px;
		margin-top: 16px;
		border-radius: 4px;
		background-color: #fff;
		border: solid 1px #bfcaff;
		.el-button.delete {
			position: absolute;
			top: -10px;
			right: -10px;
			padding: 0;
		}
	}
	.added {
		margin-top: 16px;
	}
	.el-form-item {
		margin-bottom: 22px;
	}
	.el-form-item__label {
		font-size: 16px !important;
		min-width: auto !important;
		font-weight: normal !important;
	}
	.el-form-item__content {
		margin-left: 0 !important;
	}
}
</style>
